<template>
  <div class="container padding12">
    <div class="card" :class="isWm?'wm-membercard':''">
      <div class="chain-info" :class="isWm?'wm-color':''" >{{chainInfo && chainInfo.chainName || ''}}</div>
    </div>

    <div class="footer ptb12">
      <button type="primary" @click="getOldCardList">领取</button>
    </div>

    <div class="old-card-list_popup" v-show="popupShow">
      <div class="popup-box">
        <div class="title">请选择一张卡绑定线上药店</div>
        <div class="list-wrap">
          <div :class="['item-wrap', {'select': item.cardNo == selectedOldCardTemp.cardNo}]"
               v-for="(item, index) in oldCardList" :key="index"
               @click="selectedOldCardTemp = item">
            <img class="logo" src="../../assets/images/default/logo.png" alt="">
            <div class="card-no df1">{{item.cardNo}}</div>
            <img v-show="item.cardNo != selectedOldCardTemp.cardNo" class="checkbox" src="../../assets/images/common/select_no.png" alt="">
            <img v-show="item.cardNo == selectedOldCardTemp.cardNo" class="checkbox" src="../../assets/images/common/select_yes.png" alt="">
          </div>
        </div>
        <div class="footer">
          <button type="primary" @click="chooseCard">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  .card {
    position: relative;
    width: 100%;
    height: 380rpx;
    background-image: url("../../../static/images/membership_card.png");
    background-size: cover;
    .chain-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 24rpx;
      color: $themeColor;
      box-sizing: border-box;
    }
  }

  .old-card-list_popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);

    .popup-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 85%;
      background: #FFFFFF;
      border-radius: 20rpx;
      padding: 60rpx 40rpx;
      box-sizing: border-box;
      .title {
        font-size: 36rpx;
        text-align: center;
        margin-bottom: 24rpx;
      }
      .list-wrap {
        .item-wrap {
          display: flex;
          align-items: center;
          padding: 24rpx;
          &.select {
            .card-no {
              color: $themeColor;
            }
          }
          .logo {
            width: 100rpx;
            height: 100rpx;
          }
          .checkbox {
            width: 48rpx;
            height: 48rpx;
          }
          .card-no {
            font-size: 32rpx;
            color: #666666;
          }
        }
      }
    }
  }

  .wm-membercard{
    background-image: url("../../assets/images/common/wanmin/membership_card.png")
  }
  .wm-color{
    color: #f39700;
  }
</style>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import bus from '@/mixins/bus.js'

  export default {
    mixins: [bus],
    data() {
      return {
        options: {},
        chainInfo: null,
        oldCardList: [],
        selectedOldCardTemp: null,
        selectedOldCard: null,
        popupShow: false,
      }
    },
    components: {},
    computed: {
      ...mapGetters(['scopeId', 'wxID', 'userInfo', 'openId','userInfo']),
    },
    methods: {
      ...mapActions(['updateAppSetting', 'openRouteByWebview']),
      //  获取店铺信息，以及是否开过卡
      getChainInfo () {
        wx.showLoading({
          title: '正在获取门店信息...'
        })
        this.$api.getChainInfoByCode({
          code: this.options.invCode,
        }).then(data => {
          wx.hideLoading()
          console.log(data)
          this.chainInfo = data || {}
          //  已在该旗舰店开过卡
          if (this.chainInfo.cardId) {
            this.goCardPage(this.chainInfo.cardId)
            return
          }
        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '门店信息获取失败',
            content: err.msg,
            showCancel: false,
            success(res) {
              mpvue.navigateBack({
                delta: 1
              })
            }
          })
        })
      },
      //  获取老卡列表
      getOldCardList() {
        //  test
        // this.oldCardList = [
        //   {"storeName": "壹药复美大药房上海连锁有限公司中华新路店", "storeId": "900007", "cardNo": "0110184200000629"}
        // ]
        // this.selectedOldCardTemp = this.oldCardList[0] || null
        // this.popupShow = true
        // return

        wx.showLoading({
          title: '正在获取会员卡信息...'
        })
        this.$api.getOldCardList({
          storeId: this.chainInfo.storeId,
        }).then(data => {
          wx.hideLoading()

          if (data.flag == 1) {   //  已有卡
            this.goCardPage(0)
            return
          }

          if (data.flag == 3) {   // 有老卡
            this.oldCardList = data.memberCardInfos || []
            this.selectedOldCardTemp = this.oldCardList[0] || null
          }

          if (this.oldCardList.length <= 0) {   //  如果没有老卡 则直接提交绑卡
            this.selectedOldCard = null
            this.submit()
            return
          }

          this.popupShow = true   //  有老卡 显示选择老卡弹窗

        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '开卡失败(01)',
            content: err.msg,
            showCancel: false,
            success(res) {
            }
          })
        })
      },
      chooseCard () {
        this.selectedOldCard = this.selectedOldCardTemp
        this.popupShow = false
        this.submit()
      },
      submit () {
        let method = ''
        let params = {}
        if (this.selectedOldCard) {   //  绑卡
          method = 'bindCard'
          params = {
            cardNo: this.selectedOldCard.cardNo,
            chainId: this.chainInfo.chainId,
            inviterCode: this.options.invCode,
            storeId: this.selectedOldCard.storeId
          }
        } else {
          method = 'newCard'
          params = {
            chainId: this.chainInfo.chainId,
            inviterCode: this.options.invCode,
            name: this.userInfo.nickname || '',
            sex: this.userInfo.sex || 1,  // 1男 2 女,
            address: "",
            idcard: "",
            birth: this.userInfo.birthday || '1980-01-01',    //  todo 字段待确认
            storeId: this.chainInfo.storeId || "", // 店铺id
          }
        }

        wx.showLoading()
        this.$api[method](params).then(data => {
          wx.hideLoading()
          wx.showToast({
            title: '开卡成功',
            icon: 'none',
            duration: 1500
          })
          this.goCardPage(data.id)
        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '开卡失败(02)',
            content: err.msg,
            showCancel: false,
            success(res) {
            }
          })
        })
      },
      goCardPage(cardId) {
        let route = ''
        if (cardId) {
          route = '/user/card/CardMinute?id=' + cardId
        } else {
          route = '/user/card/cardList'
        }

        this.openRouteByWebview({
          route: route,
          sendLocation: true,
          jumpType: 'replace'
        })
      }
    },
    onLoad(options) {
      this.options = options
      this.getChainInfo()
      this.busOnce('re-login-success', () => {
        this.getChainInfo()
      })
      this.isWm = wx.getStorageSync("isWm");
      console.log(this.isWm)
    },
  }
</script>

